<template>
  <div class="my-filter-excel">
    <div class="my-fe-search">
      <div class="my-fe-search-top">
        <vxe-input
          v-model="option.data.sVal"
          placeholder="搜索"
          type="search"
          clearable
          @input="inputChange"
        />
        <i class="fa fa-search my-fe-search-icon"></i>
      </div>

      <el-checkbox
        :indeterminate="isIndeterminate"
        v-model="checkAll"
        @change="handleCheckAll"
        >全选</el-checkbox
      >
      <div style="margin: 15px 0"></div>
      <el-checkbox-group
        class="my-fe-search-list"
        v-model="option.data.vals"
        @change="handleCheckedGroup"
      >
        <el-checkbox
          :style="{ display: 'block' }"
          v-for="(val, sIndex) in searchList"
          :label="val"
          :key="sIndex"
          >{{ val }}</el-checkbox
        >
      </el-checkbox-group>
    </div>
    <div class="my-fe-footer">
      <vxe-button @click="confirmFilterEvent">确认</vxe-button>
      <vxe-button @click="resetFilterEvent">重置</vxe-button>
    </div>
  </div>
</template>

<script setup>
import { ref, watch, onMounted ,computed} from "vue";
import groupBy from "xe-utils/groupBy";
const props = defineProps({
  params: Object,
});
const isIndeterminate = ref(true);
const checkAll = ref(false);
// const column = ref();
const option = ref({ data: [] });
const colValList = ref([]);
const searchList = computed(() => {
  return option.value.data.sVal
    ? colValList.value.filter(
        (val) => !!val && val.indexOf(option.value.data.sVal) !== -1
      )
    : colValList.value.filter(
        (val) => val !== "null" && val !== "" && !!val
      );
});
function handleCheckAll(value) {
  //this.searchList 解决搜索时全选把整个数组都选啦的问题
  option.value.data.vals = value ? searchList.value : [];
  //option.value.data.vals = value ? this.colValList : [];
  isIndeterminate.value = false;
}
function handleCheckedGroup(closeValue) {
  let checkedCount = value.length;
  checkAll.value = checkedCount === colValList.value.length;
  isIndeterminate.value =
    checkedCount > 0 && checkedCount < colValList.value.length;
}
function load() {
  const { $table, column } = props.params;
  const { fullData } = $table.getTableData();
  const optionVal = column.filters[0];
  let colValListVal = Object.keys(groupBy(fullData, column.property));
  let NewArray = [];
  let _colValList = [];
  if (column?.params?.optionsList && column?.params?.optionsList?.length > 0) {
    colValListVal.forEach((it) => {
      NewArray.push(
        column.params.optionsList.find((item) => item.value === it)?.label
      );
    });
    _colValList = NewArray;
  } else {
    _colValList = colValListVal;
  }
  // 去除空值
  colValList.value = _colValList.filter(
    (val) => val !== "null" && val !== "" && val !== "undefined"
  );
  column.value = column;
  option.value = optionVal;
  // 回显状态值
  let valsList = [];
  if (
    column?.params?.optionsList &&
    column?.params?.optionsList?.length > 0 &&
    option.value.data?.vals &&
    option.value.data?.vals.length > 0
  ) {
    option.value.data.vals.forEach((it) => {
      if (!colValList.value.find((item) => item === it)) {
        valsList.push(
          column.params.optionsList.find((item) => item.value === it)
            ?.label
        );
      } else {
        valsList.push(it);
      }
    });
    option.value.data.vals = valsList;
  }
}
// function sAllEvent() {
//   const { data } = option.value;
//   if (data.vals.length > 0) {
//     data.vals = [];
//   } else {
//     data.vals = colValList.value;
//   }
// }
// function sItemEvent(val) {
//   const { data } = option.value;
//   const vIndex = data.vals.indexOf(val);
//   if (vIndex === -1) {
//     data.vals.push(val);
//   } else {
//     data.vals.splice(vIndex, 1);
//   }
// }
function confirmFilterEvent(evnt) {
  const { data } = option.value;
  const { $panel } = props.params;
  data.f1 = "";
  data.f2 = "";
  console.log(evnt, $panel, option.value, 1111);
  const { column } = props.params;
  let newArray = [];
  if (column?.params?.optionsList && column?.params?.optionsList?.length > 0) {
    option.value.data.vals.forEach((it) => {
      newArray.push(
        column.params.optionsList.find((item) => item.label === it)?.value
      );
    });
    option.value.data.vals = newArray;
  }
  $panel.changeOption(evnt, true, option.value);
  $panel.confirmFilter();
}
function resetFilterEvent() {
  const { $panel } = props.params;
  $panel.resetFilter();
}
function inputChange(evnt) {
  const { data } = option.value;
  const { $panel } = props.params;
  data.f1 = "";
  data.f2 = "";
  console.log(option.value, searchList.value, 3333);
  $panel.changeOption(evnt, true, option.value);
}
onMounted(() => {
  load();
  let checkedCount = option.value.data.vals ? option.value.data.vals.length : 0;
  checkAll.value = checkedCount == colValList.value.length;
  isIndeterminate.value =
    checkedCount > 0 && checkedCount < colValList.value.length;
});
</script>

<style>
.my-filter-excel {
  user-select: none;
}

.my-filter-excel .my-fe-top .my-fe-menu-group {
  position: relative;
  padding: 0;
  margin: 0;
  list-style: none;
}

.my-filter-excel .my-fe-top .my-fe-menu-group::after {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 190px;
  content: "";
  border-bottom: 1px solid #e2e4e7;
}

.my-filter-excel .my-fe-top .my-fe-menu-group .my-fe-menu-link {
  position: relative;
  padding: 4px 20px 4px 30px;
  cursor: pointer;
}

.my-filter-excel .my-fe-top .my-fe-menu-group .my-fe-menu-link:hover {
  background-color: #c5c5c5;
}

.my-filter-excel .my-fe-top .my-fe-menu-group .my-fe-menu-link-left-icon {
  position: absolute;
  top: 6px;
  left: 10px;
}

.my-filter-excel .my-fe-top .my-fe-menu-group .my-fe-menu-link-right-icon {
  position: absolute;
  top: 6px;
  right: 10px;
}

.my-filter-excel
  .my-fe-top
  .my-fe-menu-group
  .my-fe-menu-link:hover
  .my-fe-menu-child-list {
  display: block;
}

.my-filter-excel
  .my-fe-top
  .my-fe-menu-group
  .my-fe-menu-link
  .my-fe-menu-child-list {
  position: absolute;
  top: 0;
  right: -120px;
  display: none;
  width: 120px;
  background-color: #fff;
  border: 1px solid #dadce0;
  box-shadow: 3px 3px 4px -2px rgb(0 0 0 / 60%);
}

.my-filter-excel
  .my-fe-top
  .my-fe-menu-group
  .my-fe-menu-link
  .my-fe-child-menu-group-list {
  position: relative;
}

.my-filter-excel
  .my-fe-top
  .my-fe-menu-group
  .my-fe-menu-link
  .my-fe-child-menu-group-list::after {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 90px;
  content: "";
  border-bottom: 1px solid #e2e4e7;
}

.my-filter-excel
  .my-fe-top
  .my-fe-menu-group
  .my-fe-menu-link
  .my-fe-child-menu-group-list
  > .my-fe-child-menu-item {
  position: relative;
  padding: 4px 20px 4px 30px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.my-filter-excel
  .my-fe-top
  .my-fe-menu-group
  .my-fe-menu-link
  .my-fe-child-menu-group-list
  > .my-fe-child-menu-item:hover {
  background-color: #c5c5c5;
}

.my-filter-excel .my-fe-search {
  padding: 0 10px 0 30px;
}

.my-filter-excel .my-fe-search .my-fe-search-top {
  position: relative;
  padding: 5px 0;
}

.my-filter-excel .my-fe-search .my-fe-search-top > input {
  width: 200px;
  height: 22px;
  padding: 0 20px 0 2px;
  line-height: 22px;
  border: 1px solid #ababab;
}

.my-filter-excel .my-fe-search .my-fe-search-top > .my-fe-search-icon {
  position: absolute;
  top: 10px;
  right: 5px;
}

.my-filter-excel .my-fe-search .my-fe-search-list {
  width: 100%;
  height: 140px;

  /* border: 1px solid #E2E4E7; */
  padding: 2px 10px;
  margin: 0;
  overflow: auto;
}

.my-filter-excel .my-fe-search .my-fe-search-list .my-fe-search-item {
  padding: 2px 0;
  cursor: pointer;
}

.my-filter-excel
  .my-fe-search
  .my-fe-search-list
  .my-fe-search-item
  .my-fe-search-item-icon {
  width: 16px;
}

.my-filter-excel .my-fe-footer {
  padding: 10px 10px 10px 0;
  text-align: right;
}

.my-fe-popup .my-fe-popup-filter {
  padding-left: 30px;
}

.my-fe-popup .my-fe-popup-filter > .my-fe-popup-filter-select {
  width: 120px;
}

.my-fe-popup .my-fe-popup-filter > .my-fe-popup-filter-input {
  width: 380px;
  margin-left: 15px;
}

.my-fe-popup .my-fe-popup-describe {
  padding: 20px 0 10px;
}

.my-fe-popup .my-fe-popup-concat {
  padding-left: 50px;
}

.my-fe-popup .my-fe-popup-footer {
  text-align: right;
}
</style>
